<template>
	<div class="ofansID">
		<div class="peopleList" v-for="(item,index) in peopleInfo" :key='index'>
			<div class="headImgBox">
		    	<img :src="item.imgUrl" alt="" />
		    </div>
		    <div class="rightBox">
		    	<p>{{item.name}}</p>
		    	<p>{{item.aphorism}}</p>
		    	<div class="line"></div>
		    </div>
		</div>
		<div class="goTop" @click="goTop" >
	    	回到顶部
	    </div>
	</div>
</template>

<script>
	export default{
	name:'searchCast',
	data(){
		return{
			peopleInfo:[]
		}
		
	},
	methods:{
		goTop(event){
			var time;
			time=setInterval(function(){
	            var top = document.body.scrollTop||document.documentElement.scrollTop;
	            top=top*0.9;
	            document.body.scrollTop=top;
	            document.documentElement.scrollTop=top;
	            if(top==0){
	                clearInterval(time);
	            }
            },100);
		},
		cutDesc(desc){
			if (desc.length>40){
			    desc = desc.substring(0,20)+'...';
			}
			return desc;
		}
	},
	created(){
		this.$axios.get("http://127.0.0.1:3000/peopleInfo")
	    .then(res=>{
	    	
	    	var peopleInfo=[];
	    	for(var m=0;m<res.data.peopleInfo.length;m++){
	    		var peopleInfoObj={
	    			imgUrl:res.data.peopleInfo[m].imgUrl,
	    			name:res.data.peopleInfo[m].name,
	    			aphorism:this.cutDesc(res.data.peopleInfo[m].aphorism)
	    		}
	    		peopleInfo.push(peopleInfoObj)
	    	}
	    	this.peopleInfo= peopleInfo;
//	    	console.log(this.peopleInfo)
	    })
	    .catch(error=>{
	    	console.log(error)
	    })
	}
}
</script>

<style scoped lang="less">
@current:100rem;
.ofansID{
	margin-top: 20/@current;
	.peopleList{
		padding: 0 20/@current ;
		overflow: hidden;
		.headImgBox{
			float: left;
			width: 80/@current;
			height: 80/@current;
			position:relative;
			img{
				width: 85/@current;
				height: 85/@current;
				border-radius: 50%;
				position: absolute;
				top: 10/@current;
				left: 0;
			}
		}
		.rightBox{
			width: 500/@current;
			margin-left: 20/@current;
			margin-top: 5/@current;
			float: left;
			padding-bottom: 10/@current;
			/*border-bottom: 1/@current solid #D7D2E0;*/
			p:nth-child(1){
				font-size: 28/@current;
				color: #313131;
			}
			p:nth-child(2){
				margin-top: 5/@current;
				font-size: 24/@current;
				color: #959595;
			}
			.line{
				margin-top: 20/@current;
				height: 100%;
				height: 1/@current;
				border-bottom: 1/@current solid #D7D2E0;
			}
		}
	}
	.goTop{
		border-radius: 15/@current;
		padding: 0 20/@current;
		height: 100/@current;
		line-height: 100/@current;
		font-size: 24/@current;
		color: #b676eb;
		position: fixed;
		right: 20/@current;
		bottom: 20/@current;
		background-color: #b676eb;
		color: white;
		opacity: .5;
	}
}
</style>